<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>H5_NewTags</title>
	<base target="_self">
	<style class='baseStyle'>
		*{margin:0;padding: 0;}
		a{color:inherit;text-decoration:none;outline:none;}
		a:hover{color:orange;text-decoration: underline;}
		body{
			font-family: '仿宋',Arial,'Microsoft yahei', Verdana,  Helvetica, sans-serif;
			font-size: 18px;
			padding-bottom: 200px;
		}
		.clearfix:after{
			visibility:hidden;
			content: '.';
			display: block;
			clear: both;
		}
		.clearfix{
			*zoom:1;
		}

		header{
			padding: 20px 0;
			text-align: center;

		}
		#construction{
			border:1px solid #ccc;
			background: rgba(211, 0, 252, 0.86);
			color:#eee;
			line-height: 1.6em;
		}
		#construction h4{
			margin-top:10px;
			color: #abcedf;
		}
		#construction p{
			padding-left: 1em;
			white-space: pre-wrap;
		}
		#aside-nav{
			position: fixed;
			right: 5%;
			top: 10%;
			display: none;
			flex-flow:column;
			color:rgba(255,255,255,1);
		}
		
		#top{
			display: none;
			position: fixed;
			right: 5%;
			bottom: 5%;
			text-align: center;
			width:35px;
			height: 35px;
			border-radius: 100%;
			line-height: 35px;
			box-shadow: 1px 1px 1px rgba(0,0,0,.5);
			cursor: pointer;
			color: #000;
			font-weight: bold;
			z-index: 9999;
		}
		section:not(.knowledege){
			position: relative;
			margin-top:100px;
		}
		section:not(.knowledege) p{
			position: absolute;
			top:0;
			left: 0;
			white-space: pre-line;
		}
	</style>
	<style class='classroom'>
		.example{
			position: relative;
			width: 100%;
		}
		.example>h2{
			margin: 50px auto;
			text-align: center;
		}
		.example>nav{
			position: absolute;
			margin: 50px auto;
			left: 0;
			top:0;
			width: 20%;
			display: flex;
			flex-flow:column wrap;
		}
		.example>nav>a{
			display: block;
			text-align: left;
			margin: 5px;
		}
		.example>iframe{
			position: absolute;
			top:0;
			right: 0;
			display: block;
			margin: 50px auto;
			width: 80%;
			height: 800px;
			background-color: rgba(0,0,0,.1);
		}
	</style>
</head>
<body>
	<header class="true">
		<h1 id='h-title'>18_多媒体</h1>
		<a href="homeWork.html" target="_self">作业</a>
		<a href="../index.html" target="_self">返回目录</a>
	</header>
	<section class='knowledege'>
		<aside id='aside-nav'>
			<nav>
			</nav>
		</aside>
		<div id=top>Top</div>
		<article id='construction'>
			<h4>媒体格式</h4>
			<p>
				<mark>常见的视频格式</mark>

					视频的组成部分：画面、音频、编码格式
					视频编码：H.264、Theora、VP8(google开源)

				常见的音频格式

					音频编码：ACC、MP3、Vorbis

				HTML5支持的视频格式：
					Ogg=带有Theora视频编码+Vorbis音频编码的Ogg文件
					        支持的浏览器:F、C、O
					MEPG4=带有H.264视频编码+AAC音频编码的MPEG4文件
					        支持的浏览器: S、C
					WebM=带有VP8视频编码+Vorbis音频编码的WebM格式
					        支持的浏览器: I、F、C、O
			</p>
			<h4>Video属性</h4>
			<p>
				<mark>Video属性</mark>

				Autoplay 	视频就绪自动播放
				controls		向用户显示播放控件
				Width		设置播放器宽度
				Height		设置播放器高度
				Loop		播放完是否继续播放该视频，循环播放
				Preload		是否等加载完再播放
				Src		视频url地址
				Poster		加载等待的画面图片
				Autobuffer	设置为浏览器缓冲方式，不设置autoply才有效
			</p>
			<h4>Video  API方法</h4>
			<p>
				<mark>Video  API方法</mark>

				play()
				pause()
				load()
				全屏:   webkit    element.webkitRequestFullScreen();
				             Firefox    element.mozRequestFullScreen();
				             W3C        element.requestFullscreen();
				退出全屏：
				             webkit    document.webkitCancelFullScreen(); 
				             Firefox    document.mozCancelFullScreen(); 
				             W3C       document.exitFullscreen();

			</p>
			<h4>Video  API属性</h4>
			<p>
				<mark>Video  API属性</mark>

				currentTime  :  开始到播放现在所用的时间
				duration  :  媒体总时间(只读)
				volume  :   0.0-1.0的音量相对值
				muted  :   是否静音 false /true
				paused  :   媒体是否暂停(只读)
				ended   :   媒体是否播放完毕(只读)
				error   :  媒体发生错误的时候，返回错误代码 (只读)
				currentSrc  :   以字符串的形式返回媒体地址(只读)
				playbackRate :  播放速度 
				loadstart progress suspend emptied stalled play pause loadedmetadata                                   	loadeddata waiting playing canplay canplaythrough seeking seeked 
					timeupdate ended ratechange durationchange volumechange

			</p>
			<h4>HTML5支持的音频格式：</h4>
			<p>
				<mark>HTML5支持的音频格式：</mark>

				Ogg		   免费	支持的浏览器:C、F、O
				MP3		   收费	支持的浏览器: I、C、S
				Wav		   收费	支持的浏览器: F、O、S


				audio	属性	
					autoplay	自动播放
					controls	向用户显示播放控件
					loop		循环
					preload	是否等加载完再播放
					src		要播放的音频的 URL。


				window.AudioContext = window.AudioContext|| window.webkitAudioContext|| window.mozAudioContext; 

				window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame;

				//创建一个与音乐频次等长的数组
				 var voicehigh = new Uint8Array(analyser.frequencyBinCount);

				//将分析出来的音频数据添加到数组里面 
				analyser.getByteFrequencyData(voicehigh);


			</p>
		</article>
	</section>
	<section class='example'>
		<h2>案例展示:</h2>
		<nav>
			<a href="case/1-登录.html" target="case"></a>
			<a href="case/2-数据共享.html" target="case"></a>
			<a href="case/3-video.html" target="case"></a>
		</nav>
		<iframe name='case' src="homeWork.html" frameborder="0"></iframe>
	</section>
	<footer class='true'>
		
	</footer>
	<script class='base'>
		(function(){
			var asideNav = document.getElementById('aside-nav'),//导航
				oCons = document.getElementById('construction'),//内容
				oh4 = oCons.querySelectorAll('h4');
				frag = document.createDocumentFragment(),//Dom碎片
				createObj = null,
				min = oCons.offsetTop,
				max = min + oCons.scrollHeight,
				aTop = document.getElementById('top');
				
			for (var i = 0; i < oh4.length; i++) {
				createObj = document.createElement('a');
				createObj.innerText = oh4[i].innerText;
				oh4[i].id='title'+i;
				createObj.href = '#' + oh4[i].id;
				frag.appendChild(createObj);
			}
			asideNav.appendChild(frag);
			//addEventListener
			document.addEventListener('scroll',function(){
				var top = document.body.scrollTop;
				var bHeight = document.body.scrollHeight;
				if(top>min+200 && top<max){
					asideNav.style.display = 'flex';
				}else{
					asideNav.style.display = 'none';
				}
				if(top>bHeight/5){
					aTop.style.display = 'block';
				}else{
					aTop.style.display = 'none';
				}
			},false);
			aTop.onclick = function(e){
				e = e || window.event;
				e.preventDefault();
				m();
				function m(){
					var top = document.body.scrollTop;
					top -= 100;
					document.body.scrollTop = top;
					if(top>0){
						requestAnimationFrame(m);
					}
				}
			};
		})();
	</script>
	<script class='example'>
		(function(){
			var hTitle = document.getElementById('h-title'),
				otitle = document.querySelector('head title');
			otitle.innerText = hTitle.innerText;
			
			var oCase = document.querySelectorAll('.example>nav>a'),
				length = oCase.length;
			for (var i = 0; i < length; i++) {
				oCase[i].innerText = decodeURI(oCase[i].href.split('case/')[1]);
			}
		})();
	</script>
</body>
</html>